<template>
    <div ref="container"></div>
</template>

<script setup>
import * as THREE from 'three'    
import {ref, nextTick} from 'vue'
//导入轨道控制器
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'

const container = ref(null);

const size = {
    width: window.innerWidth,
    height: window.innerHeight - 50
}

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, size.width / size.height, 0.1, 1000 );
camera.position.set(0, 0, 10);
scene.add(camera)

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( size.width, size.height);
//将渲染器添加到dom中
nextTick(()=> {
    container.value.append( renderer.domElement )
})

//创建一个轨道控制器
const controls = new OrbitControls( camera, renderer.domElement );

//自定义一个渲染函数
const render = ()=> {
    //渲染下一帧的时候，调用render函数
    requestAnimationFrame(render)
    controls.update()
    renderer.render( scene, camera );
}
render()
</script>

<style scoped>

</style>